<!--
 * @Author: 宋杰
 * @Date: 2020-12-30 13:31:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-28 17:08:59
 * @Description: 一家十一口(猜一字) 机构管理
-->
<template>
  <div class="div1" v-loading="loading">
    <!-- 头部搜索框 -->
    <div class="div2">
      <div class="topBox3">
        <div class="topBox3_sou">
          <!-- 审批状态 -->
          <div>
            <span>审批状态: </span>
            <el-select v-model="viewstate">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 机构名称 -->
          <div>
            <span>机构名称：</span>
            <el-input
              v-model="nameInstitution"
              placeholder="机构名称"
            ></el-input>
          </div>
          <el-button type="primary" class="sousuoBox" @click="findClick">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- con -->
    <div class="div3">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="organizationId" label="序号"> </el-table-column>
        <el-table-column prop="organizationName" label="机构名称">
        </el-table-column>
        <el-table-column prop="state" label="机构审批状态"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >

            <el-button
              type="text"
              size="small"
              @click="handleClick2(scope.row)"
              v-if="scope.row.state == '已通过'"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleClicksh(scope.row)"
              v-if="scope.row.state == '待审核'"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- con end -->

    <!-- 分页 -->
    <div class="div4">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNum"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
        background
      >
      </el-pagination>
    </div>
    <!-- 分页end -->
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {
      loading: true, //加载
      //机构名称
      nameInstitution: null,
      // 审批状态
      options: [
        {
          value: "0",
          label: "已通过"
        },
        {
          value: "1",
          label: "未通过"
        },
        {
          value: "2",
          label: "待审核"
        },
        {
          value: "3",
          label: "所有"
        }
      ],
      viewstate: "3", //3 所有 0 已通过 1 未通过 2待审核

      // 列表数据
      tableData: [],

      // 分页
      total: null, //总页数
      pageNum: 1 //初始化为 1
      // 分页end
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getBackgroundData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    // 获取数据
    getBackgroundData() {
      let statusType = null;
      if (this.viewstate == "0") {
        statusType = 0; //已通过
      } else if (this.viewstate == "1") {
        statusType = 1; //未通过
      } else if (this.viewstate == "2") {
        statusType = 2; //待审核
      } else {
        statusType = null; //所有
      }

      let data = {
        pageNum: this.pageNum, //页数
        pageSize: "10", //每页条数
        organizationName: this.nameInstitution, //机构名称
        status: statusType //状态（0已通过 1未通过 2待审核）
      };
      console.log("data", data);
      // let resData = [];
      this.$fetch("business/organization/list", data)
        .then(res => {
          console.log("机构管理res", res);
          if (res.code == 200) {
            this.tableData = res.rows;
            this.total = res.total;
            this.tableData.forEach(val => {
              // val["validTime"] = val.noticeStarttime + "--" + val.noticeEndtime;
              if (val.status == 0) {
                val["state"] = "已通过";
              } else if (val.status == 1) {
                val["state"] = "未通过";
              } else if (val.status == 2) {
                val["state"] = "待审核";
              }

              // 处理创建时间
              let time = null;
              time = val.createTime.toString().split(" ");
              val.createTime = time[0];
            });
          }
          this.loading = false;
        })
        .catch(err => {
          console.log("机构管理err", err);
          this.loading = false;
        });
    },

    // 查找
    findClick() {
      this.getBackgroundData();
    },

    // 进入查看页面
    handleClick(row) {
      console.log(row);
      this.$router.push({
        name: "OMtoview",
        params: {
          organizationId: row.organizationId
        }
      });
    },

    // 进入修改页面
    handleClick2(row) {
      console.log(row);
      this.$router.push({
        name: "OMmodify",
        params: {
          organizationId: row.organizationId
        }
      });
    },

    // 进入审核页面
    handleClicksh(row) {
      console.log(row);
      this.$router.push({
        name: "OMtoviewSH",
        params: {
          organizationId: row.organizationId
        }
      });
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
      this.getBackgroundData();
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getBackgroundData();
    }
    // 分页 end
  }
};
</script>
<style scoped>
.div1 {
  /* border: 1px solid #000; */
  background: #f5f6fa;
}

/* 头部搜索 */
.div2 {
  margin-bottom: 20px;
}
.div2,
.div3 {
  /* border: 1px solid rgb(18, 141, 241); */
  background: #fff;
  /* border-radius: 8px; */
  padding: 10px;
}

.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
}
/* 头部搜索 */
.sousuoBox {
  margin-left: 10px;
  height: 30px !important;
  padding: 0;
  width: 60px;
}
.topBox3_sou {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.topBox3_sou >>> .el-input {
  width: 180px;
}
.topBox3_sou > :nth-child(1) {
  margin-right: 10px;
}
.topBox3_sou >>> .el-input__inner {
  height: 30px !important;
  line-height: 32px;
}
.topBox3_sou >>> .el-input__icon {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
}
/* 头部搜索end */

/* 内容 */
.div3 >>> .el-table thead {
  color: rgb(75, 74, 74) !important;
}
/* .div3 >>> .el-table__row > td:last-child {
  color: rgb(43, 155, 230);
} */
/* .caozuo1 {
  cursor: pointer;
  margin: 0 10px;
} */

/* 内容end */
/* 分页 */
.div4 {
  background: #fff;
  width: 100%;
}
.div4 > :nth-child(1) {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.div4 >>> .el-pagination__total {
  position: absolute;
  left: 5px;
}

/* 分页end */
</style>
